<script>
import axios from "axios";
export default {
    name: "App",
    data(){
        return {
            userInfo:null
        }
    },
    methods:{
        loginHandler(){
            const username = this.$refs.username.value.trim();
            const password = this.$refs.password.value.trim();
            // http://zhangpeiyue.com/api/login
            axios.post("/api/login",{
                username,
                password
            }).then(value=>{
                const {ok,msg,userInfo} = value.data;
                if(ok === -1){
                    alert(msg);
                }else{
                    this.userInfo = userInfo;
                }
            })
        }
    }
}
</script>

<template>
    <tempalte v-if="userInfo">
        <p>账号：{{userInfo.username}}</p>
        <p>密码：{{userInfo.password}}</p>
        <p>性别：{{userInfo.sex}}</p>
        <p>年龄：{{userInfo.age}}</p>
        <p>爱好：{{userInfo.hobby}}</p>
    </tempalte>
    <form v-else>
        <p>账号：<input ref="username" type="text"></p>
        <p>密码：<input ref="password" type="password"></p>
        <button @click.prevent="loginHandler">登陆</button>
    </form>
</template>

<style scoped>

</style>